<template>
	<div style="background-color: #f04e7c;" v-if="detail !== null">
		<div class="cPage">
			<div class="rowStart">
				<image :src="detail.coverImg.url" style="width: 100px;height: 135px;border-radius: 8px;" />
				<div style="flex:1;margin-left: 16px;" class="colAround">
					<div style="font-size: 16px;font-weight: 400;line-height: 28px;">{{detail.name}}</div>
					<div style="font-size: 16px;">支付金额: <span
							style="font-size: 18px;font-weight: 500;color: #d13d62;">￥{{order.totalMoney/100}}</span>
					</div>
					<div class="rowBetween" style="font-size: 14px;color:#999999;">
						<div>票价: {{order.theaterGrade}}</div>
						<div>数量: x{{order.tickerNum}}</div>
					</div>
					<div v-if="order.isInvalid" class="row" style="color: #f04e7c;font-size: 16px;padding: 2px 0;">订单已取消</div>
				</div>
			</div>
			<div style="margin-top: 20px;border-bottom: solid 1px #f2f2f2;padding-bottom: 12px;">
				<div style="font-size: 14px;font-weight: 500">{{order.theaterSession}}</div>
				<div style="font-size: 14px;color: #999999;margin-top: 4px;">约{{detail.duration}}分钟（以现场为准）</div>
			</div>
			<div style="margin-top: 12px;border-bottom: solid 1px #f2f2f2;padding-bottom: 12px;" class="rowBetween">
				<div>
					<div style="font-size: 14px;font-weight: 500">广州市 | 广州中山纪念堂</div>
					<div style="font-size: 14px;color: #999999;margin-top: 4px;">{{detail.city}}<span
							style="color: #999999;"> | </span>{{detail.theaterName}}</div>
				</div>
				<div style="align-self: center;font-size: 12px;color: blue">复制地址</div>
			</div>
			<mp-html :content="detail.introduction"></mp-html>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html";
	import { ref, computed, onMounted } from "vue";
	import { onReachBottom, onShareAppMessage } from "@dcloudio/uni-app";
	import { onLoad } from "@dcloudio/uni-app";
	import DbUtil from "@/utils/DbUtil";
	import StrUtil from "@/utils/StrUtils.js";
	import { gzhShare } from "@/utils/WxGzhUtil";

	//分享
	onShareAppMessage((options) => {
		console.log("onShareAppMessage.options:", options);
		return {
			title: "向您分享" + detail.value.name,
			path: "/pages/launch/welcome" +
				"?page=main_page&tab=MainPage" +  // tab: 首页-MainPage，全友圈-FriendList，活动-ActivityList，通讯录-BusinessCard，我的-My,
				"&shareUserId=" + getApp().globalData.curUserId +
				"&shareOpenId=" + getApp().globalData.curOpenId,
			imageUrl: detail.value.coverImg.url,
		}
	})

	let detail = ref(null)
	let order = ref(null)
	onLoad(async (options) => {
		order.value = await DbUtil.getInstance("ndp-theater-order,ndp-theater-product").getById(options.id)
		if (order.value && order.value.productId.length > 0) {
			detail.value = order.value.productId[0]
		}
		
		gzhShare({
			isShowMenu: false, // 隐藏菜单
			shareInfo: {}
		});
	})

	const getMoney = computed(() => (moneys : any[]) => {
		return moneys[0] + " - " + moneys[moneys.length - 1]
	})

	const getTime = computed(() => (_times : any[string]) => {
		if (_times.length == 1) {
			return _times[0].substring(0, 10).replaceAll('-', '.') + " " + StrUtil.getWeek(_times[0]) + " " + _times[0].substring(11, 16).replaceAll('-', '.')
		} else {
			let start = _times[0]
			let end = _times[_times.length - 1]
			if (start.substring(0, 4) == end.substring(0, 4)) {
				return start.substring(0, 10).replaceAll('-', '.') + " - " + end.substring(5, 10).replaceAll('-', '.')
			} else {
				return start.substring(0, 10).replaceAll('-', '.') + " - " + end.substring(0, 10).replaceAll('-', '.')
			}
		}
	})

	const onChooseSite = () => {
		let json = {
			id: detail.value._id,
			gradeMoneys: detail.value.gradeMoneys,
			sessionTimes: detail.value.sessionTimes,
			name: detail.value.name,
		}
		uni.navigateTo({
			url: "/pages/ticker/choosesite?row=" + encodeURIComponent(JSON.stringify(json))
		})
	}
</script>

<style lang="scss" scoped>
	.cPage {
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		background: white;
		padding: 16px;
	}

	.cFixBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 60px;
		border-top: solid 1px #f2f2f2;
		background-color: white;
	}

	.cShareButton {
		width: 80px;
		line-height: 38px;
		color: #f04e7c;
		font-size: 16px;
		background-color: white;
		border: solid 1px #f04e7c;
		border-radius: 19px;
		align-self: center;
	}

	.cChooseSite {
		width: 180px;
		line-height: 38px;
		background-color: #f04e7c;
		color: white;
		font-size: 16px;
		font-weight: 500;
		border-radius: 19px;
		align-self: center;
		text-align: center;
		margin-right: 16px;
	}
</style>